<template>
	<view>
		<uv-navbar
			:leftIconColor="navstyle.txtColor"
			:titleStyle="titleStyle"
			:title="navstyle.title"
			:leftIcon="navstyle.leftIcon"
			:bgColor="navstyle.bgColor"
			:fixed="false" 
			@leftClick="leftClick"
			:safeAreaInsetTop="false">
		</uv-navbar>
		<view class="order_tab">
			<uv-tabs
			lineWidth="32" 
			lineHeight="2"
			lineColor="#f56c6c" 
			:scrollable=false
			:activeStyle="{
				color: '#303133',
			}"
			itemStyle="flex:1;font-size:16px"
			:list="list" @click="tabClick"></uv-tabs>
		</view>
		<view class="content" v-if="status>=2">
			<view class="goods" v-for="(item,index) in sellList" :key="index">
				
				<view class="pcy">
					<view class="pcy_ww">
						<view class="pcy_a">
							支付订单Id： {{item.id}}
						</view>
						<view class="pcy_a">
							金额：{{item.money}}
						</view>
						<view class="qianwang">
							<view class="pcy_b">
								订单状态： <text>{{item.status == 2 ? "已收款" : item.status == 1 ? "等待收款":"等待打款"}}</text>
							</view>
						</view>
						
					</view>
					<view class="pcy_tu1">
						<view class="pcy_a" style="margin: 0;" v-if="item.status == 1" >
							<button  @click="sellerClick(item,index)" class="playBtn" click="">前往收款</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="content" v-if="status<2">
			<view class="goods" v-for="(item,index) in sellList" :key="index" >
				<view class="caiy">
				  订单编号：<text>{{item.goodsSn}}</text>	
				</view>
				<view class="pcy">
					<view class="pcy_tu">
						<image :src="item.goodsimage" mode=""></image>
					</view>
					<view class="pcy_ww">
						<view class="pcy_a">
							{{item.goodsSn}}
						</view>
						<view class="pcy_a">
							{{item.goodsName}}
						</view>
						<view class="qianwang">
							<view class="pcy_b">
								价格 <text>{{item.goodsPrice}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="qianwang">
					<view class="pcy_b">
						
					</view>
				</view>
			</view>
		</view>
		<empty-vue v-if="sellList.length == 0"></empty-vue>
	</view>
	
</template>

<script>
	import emptyVue from '../../components/empty.vue';
	import {fetchsellOrderList} from '@/api/warehouse.js'
	export default {
		components: { emptyVue },
		data() {
			return {
				navstyle: {
					title: "卖方仓库",
					txtColor: "#333333",
					bgColor: "#FFFFFF",
					leftIcon: "arrow-left"
				},
				titleStyle: {
					fontWeight: 700
				},
				list:[
					{
						state:0,
						name:"我的仓库",
					},
					{
						state:1,
						name:"委卖订单",
					},
					{
						state:3,
						name:"待收款",
					},
					{
						state:4,
						name:"已收款",
					}
				],
				page:1,
				limit:50,
				status:0,
				sellList:[],
			
			}
		},
		onLoad(options) {
			this.status = options.state;
			console.log(this.status);
			this.loadData()
			
		},
		methods: {
			leftClick() {
				uni.reLaunch({
				  url: '/pages/index/user' // 替换成上一页的路径
				});
			},
			sellerClick(item,index){
				console.log(item,2222)
				uni.navigateTo({
				  url: '/pages/warehouse/sellerDetail?orderId=' + item.id
				});	
				
				
			},
			tabClick(item){
				console.log('item', item);
				this.status = item.state;
				this.loadData()
			},
			loadData(){
				this.sellList=[]
				fetchsellOrderList({
					page:this.page,
					limit:this.limit,
					status:this.status
				}).then(response => {
					if(this.status == 0 || this.status == 1){
						this.sellList = response.data.data;
					}else{
						this.sellList = response.data;
					}
					
				});
			}
		}
	}
</script>

<style>
	.page{
		width: 100%;
		height: 100%;
	    background-color: #fafafa;
	}
	.order_tab{
	    display: flex;
	    justify-content: space-between;
	    padding: 8px 0;
	    font-size: 16px;
	    line-height: 35px;
	}
	.uv-tabs {
	    width: 100% !important;
	}
	.goods {
	    width: 100%;
	    background-color: #fff;
	    box-shadow: 2px 2px 4px #ccc;
	    margin-bottom: 5px;
	    padding-bottom: 15px;
	}
	.jzn {
	    width: 90%;
	    margin: auto;
	    padding-top: 10px;
	    display: flex;
	    justify-content: space-between;
	}
	.jzn_fu {
	    color: #ea4335;
	}
	.caiy{
	    font-size: 14px;
	    color: #80817f;
	    padding-left: 15px;
	}
	.pcy{
	    padding: 3px 10px 1px 10px;
	    display: flex;
	    justify-content: space-between;
	}
	.pcy_tu{
	    width: 37%;
	    padding: 10px;
	}
	.pcy_tu image{
	    width: 100%;
	    height: 104px;
	    border-radius: 10px;
	}
	.pcy_ww {
	    width: 64%;
	    padding: 8px;
	    font-size: 14px;
	}
	.pcy_a {
	    margin: auto;
	    font-size: 15px;
	    font-weight: 700;
	    margin-bottom: 10px;
	}
	.pcy_tu1{
		width: 37%;
		padding: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.qianwang{
	    height: 31px;
	    align-items: center;
	    display: flex;
	    justify-content: space-between;
	}
	.pcy_b {
	    font-size: 15px;
	    color: #ff4848;
	    font-weight: 700;
	}
	.sjth {
	    width: 100%;
	    display: flex;
	    justify-content: flex-end;
	    height: 20px;
	    padding: 0 10px;
	}
	.playBtn{
		background-color: #DADADA;
		float: right;
		font-size: 13px;
	}
</style>